<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view
      style="display: flex; align-items: center; width: 100%; box-sizing: border-box; position: fixed; top: 0; left: 0; padding-left: 30rpx; background-color: #fff; z-index: 99"
      :style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }"
    >
      <view @click="goback">
        <image src="../../static/indeximg/left.png" style="width: 20rpx; height: 28rpx; vertical-align: middle" mode=""></image>
      </view>
      <view style="font-weight: bold; font-size: 36rpx; color: #151515; margin-left: 260rpx">{{ title }}</view>
      <view></view>
    </view>
    <!-- 站位盒子 -->
    <view :style="{ height: navheight + 'px', width: '100%' }"></view>
    <!-- 搜索框 -->
    <uni-search-bar
      v-model="keyword"
      class="uni-mt-10"
      radius="100"
      placeholder="请搜索您想要的内容"
      clearButton="none"
      cancelButton="none"
      @confirm="search"
      style="margin-bottom: 24rpx"
    />
    <!-- 列表 -->
    <view class="item" v-for="item in list" :key="item.id" @click="join(item)">
      <image :src="img_url + item.group_avatar" style="width: 112rpx; height: 112rpx; border-radius: 50%" mode="aspectFill"></image>
      <view style="padding-left: 24rpx; width: 520rpx; box-sizing: border-box">
        <!-- 标题 -->
        <view style="display: flex; align-items: center; justify-content: space-between">
          <view style="font-weight: bold; font-size: 32rpx; color: #151515">{{ item.group_name }}</view>
          <view
            style="
              width: 144rpx;
              height: 60rpx;
              background: #feff01;
              border-radius: 30rpx 30rpx 30rpx 30rpx;
              font-weight: 500;
              font-size: 24rpx;
              color: #151515;
              text-align: center;
              line-height: 60rpx;
            "
          >
            申请加入
          </view>
        </view>
        <!-- 描述 -->
        <view style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 400; font-size: 24rpx; color: #666666; margin-top: 12rpx">
          {{ item.bulletin }}
        </view>
      </view>
    </view>
    <!-- 列表无数据 -->
    <view v-if="list.length == 0" style="display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; top: 642rpx; left: 143rpx">
      <image src="../../static/indeximg/nodata.png" style="width: 464rpx; height: 252rpx" mode=""></image>
      <view>暂无搜索</view>
    </view>

    <!-- 弹框 -->
    <uni-popup ref="popup" type="center">
      <view class="box">
        <view style="position: relative; top: 0; left: 0">
          <image src="../../static/indeximg/pupopbgc.png" style="width: 580rpx; height: 232rpx" mode=""></image>
          <viwe style="font-weight: 400; font-size: 32rpx; color: #151515; position: absolute; top: 28rpx; left: 194rpx">申请进入群组</viwe>
          <view style="display: flex; align-items: center; position: absolute; top: 92rpx; left: 80rpx">
            <image :src="img_url + currentgroup.group_avatar" style="width: 112rpx; height: 112rpx; border-radius: 50%" mode="aspectFill"></image>
            <view style="font-weight: bold; font-size: 36rpx; color: #151515; padding-left: 24rpx">{{ currentgroup.group_name }}</view>
          </view>
        </view>
        <view style="display: flex; align-items: center; justify-content: space-evenly">
          <view
            @click="$refs.popup.close()"
            style="
              width: 192rpx;
              height: 68rpx;
              background: #f8f8f8;
              border-radius: 34rpx 34rpx 34rpx 34rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #666666;
              text-align: center;
              line-height: 68rpx;
            "
          >
            取消
          </view>
          <view
            @click="joingroup"
            style="
              width: 192rpx;
              height: 68rpx;
              background: #37c1ff;
              border-radius: 34rpx 34rpx 34rpx 34rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #ffffff;
              text-align: center;
              line-height: 68rpx;
            "
          >
            发送申请
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      img_url: this.img_url,
      hometop: '',
      navheight: '',
      title: '搜索',
      list: [],
      keyword: '',
      categoryid: '', //分类id
      currentgroup: {}
    };
  },
  onReachBottom() {
    console.log('触底了');
  },
  onLoad(opt) {
    // console.log(JSON.parse(opt.title));
    if (opt.title) {
      this.title = JSON.parse(opt.title).category_name;
      this.categoryid = JSON.parse(opt.title).id;
    }
    this.search();
    const app = getApp();
    this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
    this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
  },
  methods: {
    //加入群组
    joingroup() {
      this.http('/group/applyGroup', {
        group_id: this.currentgroup.id
      }).then((res) => {});
      this.$refs.popup.close();
    },
    join(item) {
      this.currentgroup = item;
      this.$refs.popup.open();
    },
    // 返回
    goback() {
      uni.navigateBack();
    },
    async search() {
      const res = await this.http('/group/getGroupList', {
        city_id: uni.getStorageSync('cityid'),
        group_category_id: this.categoryid,
        search: this.keyword
      });
      console.log(res);
      this.list = res.data;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 690rpx;
    height: 160rpx;
    margin: 0 30rpx 16rpx;
    padding: 24rpx 16rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }
  .box {
    box-sizing: border-box;
    width: 580rpx;
    height: 340rpx;
    border-radius: 30rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
  }
}
</style>
<style>
.uni-searchbar__box {
  justify-content: flex-start !important;
}
page {
  background: linear-gradient(98deg, #fefbff 0%, #fffbf5 100%);
}
</style>
